<template>
    <el-container>
        <el-header>
            <hcHeader></hcHeader>
        </el-header>
        <el-container>
            <el-aside :width="$store.state.asideWidth">
                <hcMenu></hcMenu>
            </el-aside>
            <el-main>
                <hcTag></hcTag>
                <router-view v-slot="{ Component }">
                    <Transition name="fade">
                        <KeepAlive :max="10">
                            <component :is="Component"></component>
                        </KeepAlive>
                    </Transition>

                </router-view>
            </el-main>
        </el-container>

    </el-container>
</template>
<script setup>
import hcHeader from "./components/hc-header.vue"
import hcMenu from "./components/hc-menu.vue"
import hcTag from "./components/hc-tag.vue"
</script>
<style>
.el-aside {
    transition: all 0.2s;
}
.fade-enter-from{
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}
.fade-enter-to{
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
.fade-leave-from{
    opacity:1;
}
.fade-leave-to{
    opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
    transition: all 0.2s;
}
.fade-enter-active{
    transition-delay: 0.2s;
}
</style>